<template>
  <div class="b-router-tab">
    <span :class="['b-router-tab-item cursor-pointer ',{
      'b-router-tab-item--active':item.value === value
    }]"
          v-for="item in options"
          :key="item.value"
          @click="onChange(item.value)">
      {{item.label}}
    </span>
  </div>
</template>

<script>
export default {
  name: 'BRouterTab',
  props: {
    value: String,
    options: {
      type: Array,
      default: () => ([])
    }
  },
  methods: {
    onChange (val) {
      this.$emit('input', val)
      this.$emit('change', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.b-router-tab {
  &-item {
    font-size: 14px;
    font-weight: 600;
    color: #262626;
    padding: 4px 12px;
    &--active {
      color: #0043ce;
    }
  }
}
</style>